<template>
  <div id="home-view">
    <NavBar type="main"></NavBar>
    <main>
      <template v-if="$route.name === 'home'">
        <div class="section flex-box">
          <div class="type-menu card" style="display: flex;flex-direction: column;justify-content: center">
            <div class="menu-item" v-for="item in menu" :key="item.title" @click="gotoCourseListPage(item)">
              <span>{{ item.title }}</span>
              <img src="@/assets/more.png" alt="more">
            </div>
          </div>
          <div class="carousel" style="height: 450px;border-radius: 10px">
            <Carousel :list="list" width="900px" height="450px"></Carousel>
          </div>
        </div>
        <div class="section s2">
          <div class="s-title">
            <div>课程</div>
            <div class="more-course">更多>></div>
          </div>
          <div class="s-main">
            <template>
              <div class="course card" v-for="item in courses" :key="item.id" @click="toCourse(item.url)">
                <div class="course-cover img-box">
                  <img :src="item.avatar" alt="more">
                </div>
                <div class="course-info">
                  <div class="course-title">
                    <span>{{ item.title }}</span>
                  </div>
                  <div class="course-teacher">
                    <span class="name">{{ item.teacher }}</span>
                    <span class="position">{{ item.position }}</span>
                  </div>
                  <div class="course-class">
                    <span>共计{{ item.chapterNum }}章{{ item.sectionNum }}讲</span>
                  </div>
                  <div
                      style="display: flex;flex-direction: row;justify-content: space-between;align-items: end;margin-top: 40px;width: 100%">
                    <div class="course-price">
                      <div class="price-now">
                        <span>￥{{ item.priceNow }}</span>
                      </div>
                      <div class="price-before">
                        <del>￥{{ item.priceBefore }}</del>
                      </div>
                    </div>
                    <div class="course-count">
                      <span>{{ item.learnCount }}人已学习</span>
                    </div>
                  </div>

                </div>
              </div>
            </template>
          </div>
        </div>
        <!--        <div class="section s3">-->
        <!--          <div class="s-title">-->
        <!--            <div>直播</div>-->
        <!--            <div>更多>></div>-->
        <!--          </div>-->
        <!--          <div class="s-main">-->
        <!--            <SliderBar>-->
        <!--              <template>-->
        <!--                <div class="live card" v-for="item in lives" :key="item.id">-->
        <!--                  <div class="live-cover img-box">-->
        <!--                    <img :src="item.cover" alt="cover">-->
        <!--                  </div>-->
        <!--                  <div class="live-info">-->
        <!--                    <div class="live-title">-->
        <!--                      <span>{{item.title}}</span>-->
        <!--                    </div>-->
        <!--                    <div class="live-time">-->
        <!--                      <span>{{item.time}}</span>-->
        <!--                    </div>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--              </template>-->
        <!--            </SliderBar>-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="section s3">
          <div class="service">
            <div class="head">
              {{serviceTitle}}
            </div>
            <div class="content">
              <div class="item" v-for="item in serviceList" :key="item.id">
                <img class="service-img" :src="item.imgPath">
                <div class="item-title">
                  {{item.title}}
                </div>
                <div class="item-desc">
                  {{item.desc}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <router-view></router-view>
      </template>
    </main>
    <CopyrightInformation class="copyright-information"></CopyrightInformation>
  </div>
</template>

<script>
import constants from '_u/constants';
import NavBar from "_c/HeadNav";
import SliderBar from "_c/SliderBar";
import Carousel from "_c/Carousel";
import CopyrightInformation from "_c/CopyrightInformation";

export default {
  components: {CopyrightInformation, Carousel, SliderBar, NavBar},
  mounted() {
    this.menu = constants.LABELS;
  },
  data() {
    return {
      menu: [],
      list: [
        {
          imgPath: 'https://pic.imgdb.cn/item/629d96830947543129f324ba.jpg',
          url: 'http://www.fyzzz.top/ee/center'
        },
        {
          imgPath: 'https://pic.imgdb.cn/item/629d967f0947543129f32010.png',
          url: 'http://www.fyzzz.top/ee/center'
        },
        {
          imgPath: 'https://pic.imgdb.cn/item/629d96920947543129f33805.png',
          url: 'http://www.fyzzz.top/ee/center'
        },
        {
          imgPath: 'https://pic.imgdb.cn/item/629d96960947543129f33ceb.png',
          url: 'http://www.fyzzz.top/ee/center'
        },

      ],
      courses: [
        {
          id: 12,
          avatar: 'https://tse1-mm.cn.bing.net/th/id/R-C.c3243ab96f356199443c3f1662809ae1?rik=eWB3ho7tkiajHA&riu=http%3a%2f%2fwww.sdtxmq.com%2fUploadFiles%2fFCK%2f2019-11%2f6370881786999115856398500.jpg&ehk=JDca%2blnEXoMmyp5AhuIztB8g7i3aaQksddljf2rMcNc%3d&risl=&pid=ImgRaw&r=0',
          title: '建筑师2022',
          teacher: '名家纵论',
          position: '教授',
          chapterNum: 7,
          sectionNum: 18,
          priceBefore: 2000,
          priceNow: 1600,
          learnCount: 124,
          url: 'http://www.fyzzz.top/home/course/detail/6'
        },
        {
          id: 12,
          avatar: 'https://tse1-mm.cn.bing.net/th/id/R-C.d8b8ed92f990ca430ccefc90c4dedcae?rik=3wmspwofnmOhEQ&riu=http%3a%2f%2fkdmem.cn%2fUploads%2fimage%2f20170508%2f20170508093357_88061.jpg&ehk=CRI19EIY%2fHCFX94B05L5hzPeUuNqhy0KP7WuON3IZ6g%3d&risl=&pid=ImgRaw&r=0',
          title: '结构师2022',
          teacher: '名家纵论',
          position: '教授',
          chapterNum: 9,
          sectionNum: 25,
          priceBefore: 2000,
          priceNow: 1600,
          learnCount: 124,
          url: 'http://www.fyzzz.top/home/course/detail/8'
        },
        {
          id: 12,
          avatar: 'https://img1.qunarzz.com/travel/d9/1811/f7/2691903d0fc23db5.jpg_r_453x680x95_1e0e7f08.jpg',
          title: '岩土师2022',
          teacher: '名家纵论',
          position: '教授',
          chapterNum: 10,
          sectionNum: 43,
          priceBefore: 2000,
          priceNow: 1600,
          learnCount: 124
        }
      ],
      lives: [
        {
          id: 12,
          title: '微博计算架构实战',
          time: '4月27日 18:00',
          cover: 'https://cdn.pixabay.com/photo/2022/04/11/07/15/deer-7124972__340.jpg'
        },
        {
          id: 13,
          title: '微博计算架构实战',
          time: '4月27日 18:00',
          cover: 'https://cdn.pixabay.com/photo/2022/04/11/07/15/deer-7124972__340.jpg'
        },
        {
          id: 14,
          title: '微博计算架构实战',
          time: '4月27日 18:00',
          cover: 'https://cdn.pixabay.com/photo/2022/04/11/07/15/deer-7124972__340.jpg'
        },
        {
          id: 15,
          title: '微博计算架构实战',
          time: '4月27日 18:00',
          cover: 'https://cdn.pixabay.com/photo/2022/04/11/07/15/deer-7124972__340.jpg'
        },
        {
          id: 16,
          title: '微博计算架构实战',
          time: '4月27日 18:00',
          cover: 'https://cdn.pixabay.com/photo/2022/04/11/07/15/deer-7124972__340.jpg'
        },
        {
          id: 17,
          title: '微博计算架构实战',
          time: '4月27日 18:00',
          cover: 'https://cdn.pixabay.com/photo/2022/04/11/07/15/deer-7124972__340.jpg'
        }
      ],
      serviceTitle:'全流程闭环式学习服务',
      serviceList:[
        {
          id:1,
          imgPath:'https://static001.geekbang.org/static/service/img/service-logo-manager.2414fe0d.png',
          title:'专属客户成功经理一对一服务',
          desc:'产品使用培训、协助功能使用｜专属服务群，及时响应｜定期跟踪，获取新的学习需求',
        },
        {
          id:2,
          imgPath:'',
          title:'学习运营支持',
          desc:'配置企业后台、方便部门和会员管理｜定期导出学习报告｜全程督学，提高学习完成率｜课程学习运营方案优化'
        },
        {
          id:3,
          imgPath:'https://static001.geekbang.org/static/service/img/service-logo-project.1f90643c.png',
          title:'学习过程支持',
          desc:'汇聚名校教授讲师团队｜跟踪最新技术、行业政策热点｜课程内容不断优化、更新｜提供纵论讨论区答疑区、百家争鸣、协同进步'
        }
      ]
    }
  },
  methods: {
    toCourse(url) {
      window.location.href = url
    },
    gotoCourseListPage(label) {
      this.$router.push({
        name: 'course-list',
        query: {
          label: label.title
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../styles/mixins/index";

#home-view {
  position: relative;
  min-height: 100vh;
  padding-bottom: 244px;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

main {
  @include page-main-view;
}

.section {
  margin-bottom: 40px;

  .s-title {
    display: flex;
    justify-content: space-between;
    height: 32px;


  }

  .flex-box > div {
    flex-shrink: 0;
  }
}

.service {

  .head {
    font-size: 30px;
    display: flex;
    justify-content: center;
  }

  .content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    margin: 30px auto;

    .item{
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 30px;

      .service-img{
        width: 200px;
        height: 200px;
      }

      .item-title{
        font-size: 19px;
      }
      .item-desc{
        font-size: 16px;
        color: #7f848c;
        text-align: center;
        padding: 20px 30px 0;
      }
    }
  }
}

.more-course {
  &:hover {
    cursor: pointer;
  }

}

.type-menu {
  width: 150px;
  margin-right: 20px;

  > .menu-item {
    height: 30px;
    padding: 0 10px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .5s;
    cursor: pointer;

    img {
      width: 10px;
      height: 10px;
      object-fit: cover;
    }

    &:hover {
      transition: .5s;
      color: #357FF8;
    }
  }
}

.carousel {
  flex: 1;
}

.s-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.course {
  display: flex;
  width: 300px;
  height: 160px;
  color: #565656;
  font-size: 14px;

  &:hover {
    cursor: pointer;
  }

  .course-cover {
    width: 120px;
    flex-shrink: 0;
    margin-right: 20px;
  }

  .course-info {
    width: 180px;
    position: relative;
  }

  .course-title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .course-teacher {
    margin-bottom: 10px;

    .name {
      margin-right: 5px;
    }

    .position {
      padding: 5px;
      border-radius: 5px;
      background: #eaeaea;
    }
  }

}

.live {
  width: 230px;
  height: 200px;
  margin-right: 20px;
  padding: 0;
}

.live-cover, .live-cover img {
  height: 125px;
  border-radius: 10px 10px 0 0;
}

.live-info {
  padding: 10px;

  .live-title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .live-time {
    font-size: 14px;
    color: #565656;
  }
}

.copyright-information {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
